<template>
  <div class="wrap">
    <h1>这里是个券分类规则页 这里有六个按钮</h1>
    <el-row class="mb-4">
      <el-button plain color="#626aef" @click="oneClick(1)">001、006新建分类规则</el-button>
      <el-button plain type="primary">003、004、014区间分类管理</el-button>
      <el-button plain type="success">007、017自定义区间分类</el-button>
      <el-button plain type="info">008、018剩余期限分类</el-button>
      <el-button plain type="warning">002、012离散变量分区管理</el-button>
      <el-button plain type="danger">005嵌套分类管理</el-button>
    </el-row>
    <el-table :data="tableData"  style="width: 90%;margin:0 auto" border stripe >
        <el-table-column align='center' type="index" label="序号" width="100" />
        <el-table-column align='center' prop="date" label="置顶" width="100" />
        <el-table-column align='center' prop="ID" label="分类规则ID" width="100" />
        <el-table-column align='center' prop="name" label="分类规则名称"  />
        <el-table-column align='center' prop="nature" label="分类属性" />
        <el-table-column align='center' prop="person" label="更新人" />
        <el-table-column align='center'  label="操作" width="250">
            <template #default="scope">
                <el-button size="small" @click="handleLook(scope.$index, scope.row)">查看</el-button>
                <el-button size="small" type="primary"  @click="handleEdit(scope.$index, scope.row)">Edit</el-button>
                <el-button size="small" type="danger"  @click="handleDelete(scope.$index, scope.row)">Delete</el-button>
            </template>
        </el-table-column>
    </el-table>

    <!-- 分页 -->
    <div class="demo-pagination-block">
      <el-pagination
        v-model:currentPage="currentPage4"
        v-model:page-size="pageSize4"
        :page-sizes="[10, 20, 30, 40]"
        :background="true"
        layout=" prev, pager, next, jumper, sizes, total"
        align="center" 
        v-model:total="total4"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>

    <!-- 001 006 新建分类规则 -->
    <el-dialog v-model="outerVisible" title="请选择类型模板" draggable >
      <template #default>
        <!-- 这里要写一个单选组 -->
        <!-- <h3>分类模板：</h3> -->
        <el-radio-group v-model="radio" @change="radioChange" class="radioClass">
          <el-radio :label="1">不使用模板</el-radio>
          <el-radio :label="2">企业年金国寿模板</el-radio>
          <el-radio :label="3">企业年金2</el-radio>
          <el-radio :label="4">建信养老模板</el-radio>
          <el-radio :label="5">企业年金归因模板</el-radio>
          <el-radio :label="6">企业年金</el-radio>
          <el-radio :label="7">国网年金月度分析表</el-radio>  
        </el-radio-group>
        <!-- 内层dialog -->
        <el-dialog
          v-model="innerVisible"
          width="80%"
          title="新建个券分类规则"
          append-to-body
          center
        >
          <!-- <h1>选了{{radio}}模板</h1> -->
          <!-- 这里要写一堆东西 --> 
          <div class="common-layout">
            <el-container>
              <el-aside width="50%">
                  <el-form :model="formRule" label-width="115px" label-position="left">
                    <el-form-item label="分类规则名称：">
                      <el-input v-model="formRule.name" style="width: 100%" clearable/>
                    </el-form-item>
                    <el-form-item label="分类来源：">
                      <el-select v-model="formRule.region" placeholder="请选择" style="width:80%">
                        <el-option label="来源1" value="shanghai" />
                        <el-option label="来源2" value="beijing" />
                      </el-select>
                      <el-button type="primary" @click="onSubmit"  style="margin-left:3%;width:17%">新建节点</el-button>
                    </el-form-item>
                  </el-form>
              </el-aside>
              <el-main width="50%">
                <el-input v-model="formRule.search" style="width: 100%" clearable placeholder="请输入搜索条件"/>
              </el-main>
            </el-container>
            <hr>
            <el-container>
              <el-aside width="50%">
                  <el-scrollbar max-height="400px" >
                    <div style="width:100%;height:400px;background:#9966ff;border:solid black">
                      <!-- 在这里要写树形结构了！ -->
                      
                    </div>
                  </el-scrollbar>
              </el-aside>
              <el-main width="50%">
                <el-scrollbar max-height="400px" >
                  <div style="width:100%;height:400px;background:#9966ff;border:solid black">
                    <h3>11111</h3>
                    <h3>11111</h3>
                    <h3>11111</h3>
                  </div>
                </el-scrollbar>
              </el-main>
            </el-container>
          </div>
          <template #footer>
            <div class="dialog-footer">
              <el-button type="primary" @click="innerVisible = false;outerVisible = false;innerChecked()">保存</el-button>
              <el-button @click="innerVisible = false">取消</el-button>
            </div>
          </template>
        </el-dialog>
      </template>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="innerVisible = true;outerChecked()">确定</el-button>
          <el-button @click="outerVisible = false">取消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
  
</template>

<script lang="ts" setup>

  import { ElMessage, ElMessageBox } from 'element-plus'
  import { ref ,reactive} from 'vue'


  interface User {
    date: string
    name: string
    ID: number
    nature: string
    person: string
  }

  const tableData = [
    {
      date: '置顶',
      name: 'Tom1',    
      ID: '12345',
      nature: '私有1',
      person: '尚尚1'
    },
    {
      date: '置顶',
      name: 'Tom2',
      ID: '12345',
      nature: '私有2',
      person: '尚尚2'
    },
    {
      date: '置顶',
      name: 'Tom3',
      ID: '12345',
      nature: '私有3',
      person: '尚尚3'
    },
    {
      date: '置顶',
      name: 'Tom4',
      ID: '12345',
      nature: '私有4',
      person: '尚尚4'
    },
    {
      date: '置顶',
      name: 'Tom5',
      ID: '12345',
      nature: '私有5',
      person: '尚尚5'
    },
    {
      date: '置顶',
      name: 'Tom6',
      ID: '12345',
      nature: '私有6',
      person: '尚尚6'
    },
    {
      date: '置顶',
      name: 'Tom7',
      ID: '12345',
      nature: '私有7',
      person: '尚尚7'
    },
    {
      date: '置顶',
      name: 'Tom8',
      ID: '12345',
      nature: '私有8',
      person: '尚尚8'
    }
    
  ]

  const handleLook = (index:number, row:User) => {
    console.log(index, row)

  }
  const handleEdit = (index: number, row: User) => {
    console.log(index, row)
  }
  const handleDelete = (index: number, row: User) => {
    console.log(index, row)
    ElMessageBox.confirm(
      '确定要删除此条数据么？'+'（分类名称：'+row.name+'）',
      '提示：',
      {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
      }
    ).then(() => {
        ElMessage({
          type: 'success',
          message: '删除成功',
        })
      }).catch(() => {
        ElMessage({
          type: 'info',
          message: '已取消',
        })
      })
  }


  const currentPage4 = ref(1)
  const pageSize4 = ref(10)
  const total4 = tableData.length

  const handleSizeChange = (val: number) => {
    console.log(`${val} items per page`)
  }
  const handleCurrentChange = (val: number) => {
    console.log(`current page: ${val}`)
  }

  // 新建分类规则 001
  const outerVisible = ref(false)
  const innerVisible = ref(false)
  const radio = ref(1)

  let  oneClick =async ()=>{
    console.log(1111)
    console.log(outerVisible,'111')
    outerVisible.value = true;
    radio.value =1;
  }
  const radioChange = (val:number)=>{
    console.log(`${val}`)
    console.log(radio,'radio')
    // return{
    //   radio
    // }
  }
  const outerChecked=()=>{
    console.log(radio,'radio')
    console.log('外层进内层')
    return{
      radio
    }
    
  }
  const innerChecked=()=>{
    console.log(radio,'radio')
    console.log('内层关闭')
  }

  //表单
  const formRule = reactive({
    name: radio.value +'模板',
    region: '',
    search: '',
  })


  const onSubmit = () => {
    console.log('submit!')
  }



</script>

<style scoped>
.wrap{
  width: 100%;
  height: 100%;
  text-align: center;
}
.demo-pagination-block{
  margin-top: 40px;
  /* padding-left: 20%; */
  text-align: center;
  width: 100%;
}
.demo-pagination-block :deep(.el-pagination__sizes) {
  
  margin-left: 10px !important;
}
.el-pagination{
  float: right;
}
.mb-4{
  margin: 20px auto;
  text-align: center;
  justify-content: center;
}
.radioClass{
  flex-direction: column;
  align-items: flex-start;
}
.el-aside{
  background: pink;
  padding: 10px;
}
.el-main{
  background: yellowgreen;
  padding: 10px;
  
}
.el-footer{
  background: forestgreen;
}
</style>